<!--
 * @Author: your name
 * @Date: 2021-05-28 14:44:14
 * @LastEditTime: 2021-05-31 09:47:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\overview-charg\real-time-display-charg.vue
-->
<template>
    <div class="real-time-display-charg-main">
        <div class="box-right-two" id="yieldtotalDiv">
            <table style="width: 100%;">
                <tbody>
                    <tr>
                        <td style="text-align: center;font-size:15px;line-height: 25px;">
                            <span class="cap-size" name="yieldtotal">
                                {{chargData.totalChargeEnergy | numberFloatFrm(true) | getByIndex(0)}}
                                {{chargData.totalChargeEnergy | numberFloatFrm(true) | getByIndex(1)}}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: center;line-height: 23px;white-space: nowrap;">
                            {{$t('charg.Charging.e.total')}}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="flow-img-box">
            <!-- 123123123 -->
            <div class="modul-box">
                <img src="../../assets/img/charg-img/modul-icon.png" alt="">
                <div class="grid-box" style="left:120px;">
                    <div class="title-box">
                        {{$t('devicd.display.Grid')}}
                    </div>
                    <div class="content-box">
                        <span>{{$t('index.feedInPower')}}</span>
                        <div class="input-box">{{chargData.feedInPower |chargFilter('value')}}</div>
                        <label>{{chargData.feedInPower |chargFilter('lable')}}</label>
                    </div>
                </div>
            </div>
            <div class="modul-box-line ling-flow" :class='chargData.feedInPower>0?"":chargData.feedInPower<0?"modul-box-line-sub":"no-background"'> 
                <div>
                </div>
            </div>
            <div class="home-box ">
                <img src="../../assets/img/charg-img/home-icon.png" alt="">
                
            </div>
            <div class="inverter-box-line ling-flow" :class='chargData.systemPower>0?"":chargData.systemPower<0?"inverter-box-line-sub":"no-background"'>
                <div>
                </div>
            </div>
            <div class="inverter-box ">
                <img src="../../assets/img/charg-img/inverter-icon.png" alt="">
                <div class="pv-img-sub-box">
                    <img src="../../assets/img/charg-img/pv-icon.png" alt="">
                </div>
                <div class="battery-img-sub-box">
                    <img src="../../assets/img/charg-img/battery-icon.png" alt="">
                </div>
                <div class="inverterSub-box">
                    <div class="title-box">
                        {{$t('inverter')}}
                    </div>
                    <div class="content-box">
                        <span>{{$t('charg.System.power')}}</span>
                        <div class="input-box">{{chargData.systemPower |chargFilter('value')}}</div>
                        <label>{{chargData.systemPower |chargFilter('lable')}}</label>
                    </div>
                </div>
            </div>
            <div class="charg-box-line ling-flow" :class='chargData.chargePower>0?"":chargData.chargePower<0?"charg-box-line-sub":"no-background"'>
                <div>
                </div>
            </div>
            <div class="other-box-line ling-flow" :class='chargData.loadPower>0?"":chargData.loadPower<0?"other-box-line-sub":"no-background"'>
                <div>
                </div>
            </div>
            <div class="other-box ">
                <div class="charg-img-box">
                    <i class="iconfont icon-xingzhuang"></i>
                    <div class="round-box">
                        
                    </div>
                </div>
                <div class="load-box">
                    <div class="title-box">
                        {{$t('devicd.display.Load')}}
                    </div>
                    <div class="content-box">
                        <span>{{$t('newoverView.relayPower')}}</span>
                        <div class="input-box">{{chargData.loadPower |chargFilter('value')}}</div>
                        <label>{{chargData.loadPower |chargFilter('lable')}}</label>
                    </div>
                </div>
            </div>
            <div class="charg-box ">
                <div class="charg-img-box">
                    <i class="iconfont icon-chongdianzhuang"></i>
                    <div class="round-box">
                        
                    </div>
                </div>
                <div class="charger-box">
                    <div class="title-box">
                        {{$t('charg.device.sn')}}
                    </div>
                    <div class="content-box">
                        <span>{{$t('charg.Connect.Status')}}</span>
                        <div style="flex:1;" :style='returnColor(chargData.chargeStatus)'>{{chargData.chargeStatusStr}}</div>
                    </div>
                    <div class="content-box">
                        <span>{{$t('charg.Charging.Power')}}</span>
                        <div class="input-box">{{chargData.chargePower |chargFilter('value')}}</div>
                        <label>{{chargData.chargePower |chargFilter('lable')}}</label>
                    </div>
                    <div class="content-box">
                        <span>{{$t('charg.Charging.e')}}</span>
                        <div class="input-box">{{chargData.chargeEnergy |chargFilter('value')}}</div>
                        <label>{{chargData.chargeEnergy |chargFilter('e')}}</label>
                    </div>
                    <div class="content-box">
                        <span>{{$t('charg.System.duration')}}</span>
                        <div class="input-box">{{chargData.chargeDuration || '-'}}</div>
                    </div>
                    <div class="content-box">
                        <span>{{$t('charg.System.mode')}}</span>
                        <div style="flex:1;color:#fb870f;">{{chargData.chargeModeStr}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        components: {

        },
        props: {

        },
        data() {
            return {
                chargData:''
            };
        },
        computed: {

        },
        watch: {

        },
        created() {

        },
        mounted() {
            console.log('asddasdasasdsaaaaaaaaaa')
            this.devchargepileGetFlowChartData()
        },
        methods: {
            returnMode(mode){
                if(mode == 0){
                    return 'GREEN'
                }
                if(mode == 1){
                    return 'ECO'
                }
                if(mode == 2){
                    return 'FAST'
                }
                if(mode == 100){
                    return '-'
                }
            },
            returnColor(status){
                if(status == 100){
                    return 'color:#ccc;'
                }
                if(status == 0){
                    return 'color:#ccc;'
                }
                if(status == 1){
                    return 'color:skyblue;'
                }
                if(status == 2){
                    return 'color:green;'
                }
                if(status == 3){
                    return 'color:red;'
                }
                if(status == 4){
                    return 'color:red;'
                }
                if(status == 5){
                    return 'color:orange;'
                }

            },
            returnStatus(status){
                if(status == 100){
                    return '-'
                }
                if(status == 0){
                    return this.$t('charg.status.1')
                }
                if(status == 1){
                    return this.$t('charg.status.2')
                }
                if(status == 2){
                    return this.$t('charg.status.3')
                }
                if(status == 3){
                    return this.$t('charg.status.4')
                }
                if(status == 4){
                    return this.$t('alarmLevelAnalysis.js_fault')
                }
                if(status == 5){
                    return this.$t('m_511078469627543552')
                }

            },
            async devchargepileGetFlowChartData(){
                let res = await this.API.devchargepileGetFlowChartData({
                    siteId:sessionStorage.getItem('selRow_charg_siteid'),
                    pileSn:sessionStorage.getItem('selRow_charg_pileSn'),
                })
                this.chargData = res
            }
        },
    };
</script>

<style lang="less" scoped>
    .real-time-display-charg-main {
        .no-background{
            div{
                background: none !important;
            }
        }

        .box-right-one,.box-right-two{
            float: right;
            margin: 0 10px;
            margin-top: 0px;
            padding: 4px 15px;
            min-width: 120px;
            background: url(../../assets/img/realtime/box.png) no-repeat;
            background-size: 100% 100%;
        }
        .cap-size{
            font-size: 16px;
            color: #FB870F;
        }
        .flow-img-box {
            position: relative;
            width: 900px;
            height: 475px;
            margin: 0 auto;
        }
        .modul-box {
            position: absolute;
            top: 50px;
            left: 88%;
            transform: translateX(-50%);
            img {
                width: 100px;
            }
            
        }
        .load-box,
        .inverterSub-box,
        .charger-box,
        .grid-box{
                // width: 100px;
                position: absolute;
                padding: 10px;
                border: 1px dashed #cbcbcb;
                transform: translateY(-50%);
                .title-box{
                    color: #fb870f;
                    position: absolute;
                    top: -11px;
                    left: 8px;
                    background-color: #fff;
                    padding: 0 5px;
                }
                .content-box{
                    display: flex;
                    margin-bottom:10px;
                    position: relative;
                    span{
                        display: inline-block;
                        width: 100px;
                        font-size: 12px;
                    }
                    .input-box{
                        background-color: #ededed;
                        border: 1px solid #dadada;
                        width: 75px;
                        padding-left: 3px;
                        border-radius: 2px;
                        line-height: 17px;
                        position: relative;
                        height: 17px;
                        color: #fb870f;
                    }
                    label{
                        position: absolute;
                        top: 0px;
                        right: 3px;
                        color: #afaeae;
                        font-size: 12px;
                    }
                }
            }
            .grid-box{
                top: 50%;
                left: -250px;
            }
            .load-box{
                top: 55px;
                left: -230px;
            }
            .inverterSub-box{
                top: 50px;
                left: -230px;
            }
            .charger-box{
                top: 50px;
                left: 120px;
            }
        .home-box {
            position: absolute;
            top: 50px;
            left: 50%;
            transform: translateX(-50%);
            img {
                width: 100px;
            }
        }
        
        .other-box {
            position: absolute;
            top: 265px;
            left: 30%;
            transform: translateX(-50%);
            img {
                width: 100px;
            }
            .charg-img-box{
                width: 100px;
                height: 100px;
                text-align: center;
                line-height: 100px;
                border: 2px solid #B6B6B6;
                border-radius: 50%;
                i{
                    font-size: 38px;
                    color: #6E6E6E;
                    
                }
                .round-box{
                    width: 70px;
                    height: 70px;
                    background-color: #EEEEEE;
                    border-radius: 50%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    z-index: -1;
                    box-shadow: 0px 3px 3px 1px #aaa;
                }

            }
        }
        .charg-box {
            position: absolute;
            top: 265px;
            left: 70%;
            transform: translateX(-50%);
            img {
                width: 100px;
            }
            .charg-img-box{
                width: 100px;
                height: 100px;
                text-align: center;
                line-height: 100px;
                border: 2px solid #B6B6B6;
                border-radius: 50%;
                i{
                    font-size: 38px;
                    color: #6E6E6E;
                    
                }
                .round-box{
                    width: 70px;
                    height: 70px;
                    background-color: #EEEEEE;
                    border-radius: 50%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    z-index: -1;
                    box-shadow: 0px 3px 3px 1px #aaa;
                }

            }
        }
        .inverter-box {
            position: absolute;
            top: 50px;
            left: 12%;
            transform: translateX(-50%);
            img {
                width: 100px;
            }
            .pv-img-sub-box{
                position: absolute;
                top: -20px;
                left: -20px;
                img{
                    width: 50px;
                }
            }
            .battery-img-sub-box{
                position: absolute;
                bottom: -20px;
                left: -19px;
                img{
                    width: 50px;
                }
            }
        }
        // .modul-box-line {
        //     position: absolute;
        //     top: 150px;
        //     left: 50%;
        //     transform: translateX(-50%) rotate(90deg);
        // }
        .inverter-box-line {
            width: 200px !important;
            position: absolute;
            top: 95px;
            left: 31%;
            transform: translateX(-50%);
        }
        .inverter-box-line-sub{
            transform: translateX(-50%) rotate(-180deg) !important;
        }
        .modul-box-line {
            width: 200px !important;
            position: absolute;
            top: 95px;
            left: 69%;
            transform: translateX(-50%);
        }
        .modul-box-line-sub{
            transform: translateX(-50%) rotate(-180deg) !important;
        }
        .other-box-line-sub{
            transform: translateX(-50%) rotate(-48deg) !important;
        }
        .charg-box-line-sub{
            transform: translateX(-50%) rotate(-132deg) !important;
        }
        .charg-box-line {
            width: 150px !important;
            position: absolute;
            top: 203px;
            left: 59%;
            transform: translateX(-50%) rotate(48deg);
        }
        .other-box-line {
            width: 150px !important;
            position: absolute;
            top: 203px;
            left: 41%;
            transform: translateX(-50%) rotate(132deg);
        }
        .ling-flow {
            width: 87px;
            height: 13px;
            border-radius: 8px;
            background-color: #D6D6D6;
            div {
                width: 100%;
                height: 13px;
                background: url(../../assets/img/realtime/move3.gif) no-repeat;
                background-size: auto 100%;
                background-position-x: 10px;
            }
        }
    }
</style>